<template>
  <div class="register">
    <el-card shadow="hover">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form.pwd1"></el-input>
        </el-form-item>
        <el-form-item label="确定密码">
          <el-input v-model="form.pwd2"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱">
          <el-input v-model="form.email"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="个人简介">
          <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即注册</el-button>
          <el-button @click="login">返回登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { register } from "@/API/index.js";
import { Notification } from "element-ui";
export default {
  data() {
    return {
      form: {
        username: "",
        pwd1: "",
        pwd2: "",
        email: "",
        sex: "",
        desc: ""
      }
    };
  },
  methods: {
    onSubmit() {
      //提交注册表单信息
      const {
        username,
        pw1: password,
        email,
        sex,
        desc: description
      } = this.form;
      register(username, password, email, sex, description).then(res => {
        console.log(res);
        if (res.data.code !== 1) {
          Notification.error({
            title: "登录失败!",
            message: "用户名已存在!"
          });
        }
        Notification.success({
          title: '登录成功!',
          message: '恭喜您注册成功!'
        });
        this.$router.push("/login");
      });
    },
    login() {
      this.$router.push("/login");
    }
  }
};
</script>

<style scoped>
.el-card {
  width: 40vw;
  height: 70%;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}
</style>